<template>
  <div>
    <el-dialog title="批量设置接警人" :visible.sync="dialogVisible" width="500px" :before-close="closeEditDialog"
      :close-on-click-modal="false" :append-to-body="true">
      <el-form :model="alarmReceiveInfo" :rules="rules" ref="refSetInfo" label-width="100px">
        <!-- <el-form-item size="small" label="姓名" prop="name">
                    <el-input clearable v-model.trim="alarmReceiveInfo.name"></el-input>
                </el-form-item>
                <el-form-item size="small" label="通知方式" prop="notifyType">
                    <el-checkbox-group v-model="alarmReceiveInfo.notifyType">
                        <el-checkbox label="公众号"></el-checkbox>
                        <el-checkbox label="电话"></el-checkbox>
                        <el-checkbox label="短信"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item size="small" label="关联安装点" prop="address">
                    <el-input type="input" placeholder="关联安装点" maxlength="30" v-model.trim="alarmReceiveInfo.address">
                    </el-input>
                </el-form-item>
                <el-form-item size="small" label="手机号" prop="mobile">
                    <el-input type="input" placeholder="接警人管理手机号" maxlength="11" v-model.trim="alarmReceiveInfo.mobile">
                    </el-input>
                </el-form-item> -->

        <el-form-item size="small" label="一级接警人" prop="alarmReceiverIdList1">
          <el-select v-model="alarmReceiveInfo.alarmReceiverIdList1" multiple :multiple-limit="6" placeholder="请选择"
            style="width: 100%" filterable @change="change1">
            <el-option v-for="item in dataList" :key="item.id" :label="item.name+'：'+item.mobile" :value="item.id" :disabled="item.disabled">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item size="small" label="二级接警人" prop="alarmReceiverIdList2">
          <el-select v-model="alarmReceiveInfo.alarmReceiverIdList2" multiple :multiple-limit="6" placeholder="请选择"
            style="width: 100%" filterable @change="change1">
            <el-option v-for="item in dataList" :key="item.id" :label="item.name+'：'+item.mobile" :value="item.id" :disabled="item.disabled">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item size="small" label="三级接警人" prop="alarmReceiverIdList3">
          <el-select v-model="alarmReceiveInfo.alarmReceiverIdList3" multiple :multiple-limit="6" placeholder="请选择"
            style="width: 100%" filterable @change="change1">
            <el-option v-for="item in dataList" :key="item.id" :label="item.name+'：'+item.mobile" :value="item.id" :disabled="item.disabled">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item size="small" label="四级接警人" prop="alarmReceiverIdList4">
          <el-select v-model="alarmReceiveInfo.alarmReceiverIdList4" multiple :multiple-limit="6" placeholder="请选择"
            style="width: 100%" filterable @change="change1">
            <el-option v-for="item in dataList" :key="item.id" :label="item.name+'：'+item.mobile" :value="item.id" :disabled="item.disabled">
            </el-option>
          </el-select>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeEditDialog" class="cancel-button">取 消</el-button>
        <el-button size="small" class="confirm-button" @click="editSubmit" v-preventReClick="1000">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { reqAddBatchReceiver, reqAlarmReceiverList } from "@/api/api";
import { mapState } from "vuex";

export default {
  name: "add",
  props:['batchDate','orgInfo'],
  data() {
    return {
      dialogVisible: false,
      dataList: [],
      alarmReceiveInfo: {
        alarmReceiverIdList1: [],
        alarmReceiverIdList2: [],
        alarmReceiverIdList3: [],
        alarmReceiverIdList4: [],
      },
      // 表单验证规则
      rules: {
        alarmReceiverIdList1: [
           {
            required: true,
            message: "请选择一级接警人",
            trigger: ["blur", "change"],
          },
        ],
      },
    };
  },
  computed: {
    ...mapState(["user"]),
  },
  methods: {
    change1(e){
      if(e){
        let list=[...this.alarmReceiveInfo.alarmReceiverIdList1,...this.alarmReceiveInfo.alarmReceiverIdList2,...this.alarmReceiveInfo.alarmReceiverIdList3,...this.alarmReceiveInfo.alarmReceiverIdList4,]
        // console.log(list);
        this.dataList.forEach(item=>{
          item.disabled=false;
          list.forEach(item2=>{
            if(item.id==item2){
              item.disabled=true;
            }
          })
        })
      }
    },
    // 获取接警人列表
    async getDataList() {
      const res = await reqAlarmReceiverList(1, 100, {
        userId: this.user.userId,
        roleName: this.user.roleName,
        orgId:this.orgInfo.orgId
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
    //   console.log(res);
      this.dataList = res.data.rows;
    },
    openMap() {
      this.isShowMap = true;
    },
    // 点击修改
    editSubmit() {
      this.$refs.refSetInfo.validate(async (valid) => {
        if (valid) {
            const res = await reqAddBatchReceiver({
            spaceIdList: this.batchDate,
            alarmReceiverIdList1:this.alarmReceiveInfo.alarmReceiverIdList1,
            alarmReceiverIdList2:this.alarmReceiveInfo.alarmReceiverIdList2,
            alarmReceiverIdList3:this.alarmReceiveInfo.alarmReceiverIdList3,
            alarmReceiverIdList4:this.alarmReceiveInfo.alarmReceiverIdList4,
          });
          if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
          this.$modal.notifySuccess("批量设置接警人成功");
          this.dialogVisible = false;
          this.$parent.getreqParkList(); 
          this.$parent.clearSelections(); //清空复选框
        }
      });
    },
    // 点击关闭弹框
    closeEditDialog() {
      this.$refs.refSetInfo.resetFields();
      this.dialogVisible = false;
      this.alarmReceiveInfo= {
        alarmReceiverIdList1: [],
        alarmReceiverIdList2: [],
        alarmReceiverIdList3: [],
        alarmReceiverIdList4: [],
      }
    },
  },
    deactivated() {
    if(this.$refs.refSetInfo!=null){
      this.closeEditDialog();
    }
  },
};
</script>

<style lang="less" scoped>
@import url("~@views/common.less");
</style>